<template>
  <div class="all" p-5>
    <div class="all-top">
      <div class="all-top-tittle">案件处理</div>
    </div>
    <a-tabs class="all-tabs" v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="案件信息">
        <div class="archive">
          <div class="archive-steps" v-if="route.query.status != '1' && route.query.status != '5'">
            <a-steps :current="caseStatus(penaltyData?.status)" :items="steps"></a-steps>
          </div>
          <div class="archive-body">
            <div class="archive-body-left">
              <div class="taskBox" v-if="penaltyData?.taskId || penaltyData?.resultFileUrl">
                <div class="taskBox-top" style="padding: 10px 12px">
                  <div>任务信息</div>
                  <a-button type="primary" ghost @click="goTask" v-if="penaltyData?.taskId"
                    >查看任务</a-button
                  >
                </div>
                <div class="taskBox-bottom">
                  <BookCreate
                    :type="17"
                    :url="penaltyData?.resultFileUrl"
                    @getBookUrl="getBookUrl"
                  />
                </div>
              </div>
              <div class="taskBox" v-if="lafileInfoData">
                <div class="taskBox-top">
                  <div>立案审批表</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row>
                    <BookCreate
                      :type="13"
                      :caseId="route.query.id"
                      :url="lafileInfoData.oldFileUrl"
                      :newFileUrl="lafileInfoData.newFileUrl"
                      :caseFileId="lafileInfoData.id"
                      :isShow="caseShow(penaltyData?.status)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
              </div>
              <div class="taskBox">
                <div class="taskBox-top">
                  <div>调查取证</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row>
                    <BookCreate
                      :type="7"
                      :caseId="route.query.id"
                      :url="dcfileInfoData.oldFileUrl"
                      :newFileUrl="dcfileInfoData.newFileUrl"
                      :caseFileId="dcfileInfoData.id"
                      :isShow="caseShow(penaltyData?.status)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <a-row>
                    <BookCreate
                      :type="12"
                      :caseId="route.query.id"
                      :url="cwfileInfoData.oldFileUrl"
                      :newFileUrl="cwfileInfoData.newFileUrl"
                      :caseFileId="cwfileInfoData.id"
                      :isShow="caseShow(penaltyData?.status)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <a-row>
                    <BookCreate
                      :type="14"
                      :caseId="route.query.id"
                      :url="qlfileInfoData.oldFileUrl"
                      :newFileUrl="qlfileInfoData.newFileUrl"
                      :caseFileId="qlfileInfoData.id"
                      :isShow="caseShow(penaltyData?.status)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <a-row>
                    <BookCreate
                      :type="15"
                      :caseId="route.query.id"
                      :url="xwfileInfoData.oldFileUrl"
                      :newFileUrl="xwfileInfoData.newFileUrl"
                      :caseFileId="xwfileInfoData.id"
                      :isShow="caseShow(penaltyData?.status)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <a-row>
                    <BookCreate
                      :type="11"
                      :caseId="route.query.id"
                      :url="xzfileInfoData.oldFileUrl"
                      :newFileUrl="xzfileInfoData.newFileUrl"
                      :caseFileId="xzfileInfoData.id"
                      :isShow="caseShow(penaltyData?.status)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
              </div>
              <div class="taskBox" v-if="penaltyData?.status >= 3">
                <div class="taskBox-top">
                  <div>处理文书</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row>
                    <BookCreate
                      :type="1"
                      :caseId="route.query.id"
                      :url="xzcffileInfoData.oldFileUrl"
                      :newFileUrl="xzcffileInfoData.newFileUrl"
                      :caseFileId="xzcffileInfoData.id"
                      :isShow="caseShow2(penaltyData?.status)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
              </div>
              <div class="taskBox" v-if="penaltyData?.status >= 4">
                <div class="taskBox-top">
                  <div>文书送达回证</div>
                </div>
                <div class="taskBox-bottom"
                  ><!-- 文书送达回证 -->
                  <a-row>
                    <BookCreate
                      :type="16"
                      :caseId="route.query.id"
                      :url="sdhzfileInfoData.oldFileUrl"
                      :newFileUrl="sdhzfileInfoData.newFileUrl"
                      :caseFileId="sdhzfileInfoData.id"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
              </div>
            </div>
            <div class="archive-body-right" :style="changeWith(route.query.status)">
              <PenaltyInfo :id="route.query.id" :title="false"></PenaltyInfo>
              <div
                class="penaltyInfo-body-box"
                v-if="penaltyData?.status == 3 || penaltyData?.status == 4"
              >
                <div class="penaltyInfo-body-box-tittle">
                  <div class="penaltyInfo-body-box-tittle-left"></div>
                  <div class="penaltyInfo-body-box-tittle-right">处理方式</div>
                </div>
                <div class="penaltyInfo-body-box-info">
                  <a-form
                    ref="formRef"
                    :model="formState"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                  >
                    <a-row :gutter="24">
                      <a-col class="gutter-row" :span="8">
                        <a-form-item label="处理方式" name="handleWay">
                          <a-select
                            v-model:value="formState.handleWay"
                            placeholder="请选择处理方式"
                            :open="caseHandleway(penaltyData?.status)"
                          >
                            <a-select-option :value="1">行政处罚</a-select-option>
                            <a-select-option :value="2">停业</a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col
                        class="gutter-row"
                        :span="8"
                        v-if="penaltyData?.status == 4 && penaltyData?.handleWay == 1"
                      >
                        <a-form-item label="罚款金额" name="penaltyAmount">
                          <a-input-number
                            v-model:value="formState.penaltyAmount"
                            :controls="false"
                            addon-after="元"
                            :formatter="
                              (value) => `${value}`.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
                            "
                            :maxlength="8"
                          />
                        </a-form-item>
                      </a-col>
                    </a-row>
                    <a-row :gutter="24">
                      <a-col class="gutter-row" :span="8" v-if="penaltyData?.status == 4">
                        <a-form-item label="执行结果" name="executeResult">
                          <a-radio-group v-model:value="formState.executeResult">
                            <a-radio :value="1">强制执行</a-radio>
                            <a-radio :value="2">正常执行</a-radio>
                          </a-radio-group>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-form>
                </div></div
              >
            </div>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="立案审批记录" force-render>
        <DynamicTable
          :columns="columns"
          :data-request="loadData"
          bordered
          :search="false"
          :showToolBar="false"
          :pagination="false"
        />
      </a-tab-pane>
      <a-tab-pane key="3" tab="案件处理审批记录">
        <DynamicTable
          :columns="columns"
          :data-request="loadData2"
          bordered
          :search="false"
          :showToolBar="false"
          :pagination="false"
      /></a-tab-pane>
    </a-tabs>
    <div class="bottomBox"></div>
    <div class="bottomBtns" style="z-index: 3">
      <a-space :size="12">
        <a-button size="large" @click="cacel">取消</a-button>
        <a-button
          size="large"
          type="primary"
          v-if="penaltyData?.status == 3 || penaltyData?.status == 4"
          @click="onSubmit(1)"
          >暂存</a-button
        >
        <a-button
          size="large"
          type="primary"
          v-if="penaltyData?.status == 3 || penaltyData?.status == 4"
          @click="onSubmit(0)"
          >提交</a-button
        >
        <a-button size="large" type="primary" v-if="penaltyData?.status == 2" @click="onSubmit(2)"
          >提交</a-button
        >
      </a-space>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import PenaltyInfo from '../../components/penaltyInfo.vue';
  const activeKey = ref('1');
  import router from '@/router';
  import { useRoute } from 'vue-router';
  import { caseDetail, handleCase } from '@/api/supervision/case-management';
  import { message } from 'ant-design-vue';
  import { useTable } from '@/components/core/dynamic-table';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  const tabsViewStore = useTabsViewStore();

  const [DynamicTable, dynamicTableInstance] = useTable();
  const route = useRoute();

  const goTask = () => {
    router.push({
      path: '/supervision/task-view',
      query: { id: penaltyData.value.taskId },
    });
  };

  const caseData = ref();

  //立案审批表
  const lafileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //调查取证通知书
  const dcfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //询问通知书
  const cwfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //权力义务告知书
  const qlfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //询问笔录
  const xwfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
  });

  //行政处罚告知笔录
  const xzfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //行政处罚决定书
  const xzcffileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //送达回证
  const sdhzfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
  });

  const caseDetailApi = async () => {
    const data = await caseDetail(route.query.id as any);
    penaltyData.value = data;

    if (penaltyData.value.registerList) {
      registerList.value = penaltyData.value.registerList;
      console.log(registerList.value);
    }
    if (penaltyData.value.handleList) {
      handleList.value = penaltyData.value.handleList;
    }

    if (penaltyData.value.fileInfoList.length) {
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 1).length) {
        lafileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 1,
        )[0];
      } else {
        lafileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 2).length) {
        dcfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 2,
        )[0];
      } else {
        dcfileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 3).length) {
        cwfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 3,
        )[0];
      } else {
        cwfileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 4).length) {
        qlfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 4,
        )[0];
      } else {
        qlfileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }

      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 5).length) {
        xwfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 5,
        )[0];
      } else {
        xwfileInfoData.value = {
          oldFileUrl: '123',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 6).length) {
        xzfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 6,
        )[0];
      } else {
        xzfileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 7).length) {
        xzcffileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 7,
        )[0];
      } else {
        xzcffileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 8).length) {
        sdhzfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 8,
        )[0];
      } else {
        sdhzfileInfoData.value = {
          oldFileUrl: '123',
          newFileUrl: '',
          id: '',
        };
      }
    }
  };

  const getBookUrl = (data) => {
    console.log(data);
    if (data.code == 0) {
      caseDetailApi();
    }
  };

  const cacel = () => {
    router.push({
      path: '/administrative-penalty/administrative-penalty/case-management',
    });
  };

  const formRef = ref();
  const labelCol = {
    span: 6,
  };
  const wrapperCol = {
    span: 20,
  };
  const formState = reactive({
    handleWay: undefined, // 处理方式；1.行政处罚；2.停业；
    penaltyAmount: undefined, //罚款金额；单位：元
    executeResult: undefined, //执行结果；1.强制执行；2.正常执行
  });

  const rules = {
    handleWay: [
      {
        required: true,
        message: '请选择处理方式',
        trigger: 'change',
      },
    ],
    penaltyAmount: [
      {
        required: true,
        message: '请输入罚款金额',
        trigger: 'change',
      },
    ],
    executeResult: [
      {
        required: true,
        message: '请选择执行结果',
        trigger: 'change',
      },
    ],
  } as any;

  const penaltyData = ref();

  //立案审批记录
  const registerList = ref();

  //案件处理审批记录
  const handleList = ref();

  const changeWith = (val) => {
    if (val == '1') {
      return 'width: 100%;';
    }
  };

  const caseHandleway = (val) => {
    if (val == 4) {
      return false;
    }
  };

  const caseShow = (val) => {
    switch (val) {
      case 2:
        return true;
      case 3:
        return false;
      case 4:
        return false;
      default:
        return false;
    }
  };

  const caseShow2 = (val) => {
    switch (val) {
      case 2:
        return true;
      case 3:
        return true;
      case 4:
        return false;
      default:
        return false;
    }
  };

  const caseFlowNodeName = (val) => {
    switch (val) {
      case 1:
        return '主办人';
      case 2:
        return '协办人';
      case 3:
        return '承办单位';
      case 4:
        return '大队法制';
      case 5:
        return '大队长';
      case 6:
        return '立案审批节点';
      default:
        return '-';
    }
  };

  const caseNodeStatus = (val) => {
    switch (val) {
      case 1:
        // return '待审批';
        return '-';
      case 2:
        return '同意';
      case 3:
        return '不同意';
      default:
        return '-';
    }
  };

  const steps = [
    {
      title: '调查取证',
    },
    {
      title: '案件处理',
    },
    {
      title: '结案归档',
    },
  ];

  const caseStatus = (val) => {
    switch (val) {
      case 2:
        return 0;
      case 3:
        return 1;
      case 4:
        return 2;
      default:
        return 3;
    }
  };

  const columns = [
    {
      title: '节点名称',
      dataIndex: 'flowNodeName',
      hideInSearch: true,
    },
    {
      title: '审批人',
      dataIndex: 'approveName',
      hideInSearch: true,
    },
    {
      title: '审批时间',
      dataIndex: 'approveTime',
      hideInSearch: true,
    },
    {
      title: '审批结果',
      dataIndex: 'nodeStatus',
      hideInSearch: true,
      customRender: ({ record }) => caseNodeStatus(record.nodeStatus),
    },
    {
      title: '审批意见',
      dataIndex: 'approveOpinions',
      hideInSearch: true,
    },
  ];

  const loadData = async (params): Promise<API.TableListResult> => {
    const data = await caseDetail(route.query.id as any);
    penaltyData.value = data;
    if (penaltyData.value.registerList) {
      registerList.value = penaltyData.value.registerList;
    }
    console.log(registerList.value);

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: registerList.value,
          ...params,
        });
      }, 500);
    });
  };

  const loadData2 = async (params): Promise<API.TableListResult> => {
    const data = await caseDetail(route.query.id as any);
    penaltyData.value = data;
    if (penaltyData.value.handleList) {
      handleList.value = penaltyData.value.handleList;
    }

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: handleList.value,
          ...params,
        });
      }, 500);
    });
  };

  const onSubmit = async (val) => {
    if (val == 1) {
      let data = {
        id: route.query.id,
        temporaryFlag: val,
        handleWay: formState.handleWay,
        penaltyAmount: formState.penaltyAmount,
        executeResult: formState.executeResult,
      };
      const res = await handleCase(data);

      if (res.code == 0) {
        message.success('暂存成功！');
        tabsViewStore.closeCurrentTabToUrl(
          route,
          '/administrative-penalty/administrative-penalty/case-management',
        );
      }
    } else if (val == 0) {
      if (penaltyData.value?.status === 3) {
        formRef.value
          .validate()
          .then(async () => {
            caseDetailApi();
            if (
              penaltyData.value?.registerList &&
              penaltyData.value?.handleList &&
              penaltyData.value?.fileInfoList.length >= 6
            ) {
              let data = {
                id: route.query.id,
                temporaryFlag: val,
                handleWay: formState.handleWay,
                penaltyAmount: formState.penaltyAmount,
                executeResult: formState.executeResult,
              };
              const res = await handleCase(data);

              if (res.code == 0) {
                message.success('提交成功！');
                tabsViewStore.closeCurrentTabToUrl(
                  route,
                  '/administrative-penalty/administrative-penalty/case-management',
                );
              }
            } else {
              message.error('文书未制作！');
            }
          })
          .catch((error) => {
            console.log('error', error);
          });
      } else if (penaltyData.value?.status === 4) {
        caseDetailApi();
        if (
          penaltyData.value?.registerList &&
          penaltyData.value?.handleList &&
          penaltyData.value?.fileInfoList.length >= 6
        ) {
          if (penaltyData.value?.penaltyAmount != '' && penaltyData.value?.executeResult != '') {
            formState?.penaltyAmount == penaltyData.value?.penaltyAmount;
            formState?.executeResult == penaltyData.value?.executeResult;
          }
          let data = {
            id: route.query.id,
            temporaryFlag: val,
            handleWay: penaltyData.value?.handleWay,
            penaltyAmount: formState?.penaltyAmount,
            executeResult: formState?.executeResult,
          };
          const res = await handleCase(data);

          if (res.code == 0) {
            message.success('提交成功！');
            tabsViewStore.closeCurrentTabToUrl(
              route,
              '/administrative-penalty/administrative-penalty/case-management',
            );
          }
        } else {
          message.error('文书未制作！');
        }
      }
    } else {
      if (val == 2) {
        caseDetailApi();
        if (
          penaltyData.value?.registerList &&
          penaltyData.value?.handleList &&
          penaltyData.value?.fileInfoList.length >= 5
        ) {
          let params = {
            id: route.query.id,
            temporaryFlag: 0,
          };
          const data = await handleCase(params);

          if (data.code == 0) {
            message.success('提交成功！');
            tabsViewStore.closeCurrentTabToUrl(
              route,
              '/administrative-penalty/administrative-penalty/case-management',
            );
          }
        } else {
          message.error('文书未制作！');
        }
      }
    }
  };

  onMounted(async () => {
    caseDetailApi();
    if (route.query.id) {
      const data = await caseDetail(route.query.id as any);
      penaltyData.value = data;
      formState.handleWay = penaltyData.value.handleWay;
      formState.penaltyAmount = penaltyData.value.penaltyAmount;
      formState.executeResult = penaltyData.value.executeResult;
    }
  });
</script>
<style lang="less" scoped>
  .all {
    background-color: #ffffff;

    &-top {
      &-tittle {
        padding: 0px 0 16px 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        color: rgba(68, 68, 68, 1);

        border-bottom: 1px solid rgba(240, 240, 240, 1);
      }
    }

    &-tabs {
      :global(.all-tabs.ant-tabs-top .ant-tabs-nav) {
        margin: 0 0 12px 0 !important;
      }
    }

    .archive {
      width: 100%;

      &-steps {
        width: 100%;
        border: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        padding: 24px 30%;
        background-color: #fafafa;
      }

      &-body {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;

        &-left {
          width: 30%;
          border: 1px solid #f0f0f0;
          margin-right: 12px;

          .taskBox {
            width: 100%;
            border-bottom: 1px solid #f0f0f0;

            &-top {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 14px 12px;
              background: #fafafa;
              border-bottom: 1px solid #f0f0f0;

              font-size: 14px;
              font-weight: 500;
              color: #444444;
            }
          }

          .taskBox:last-child {
            border-bottom: 0;
          }
        }

        &-right {
          width: 70%;
          border: 1px solid #f0f0f0;
          padding: 0px 18px 0 16px;
        }
      }
    }

    .penaltyInfo {
      &-body {
        &-box {
          margin-bottom: 16px;
          &-tittle {
            display: flex;
            align-items: center;
            padding: 13px 0 13px 0;
            &-left {
              border: 1px solid #0f53ac;
              margin-right: 7px;
              border-radius: 4px;
              height: 14px;
            }

            &-right {
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
              color: rgba(68, 68, 68, 1);
            }
          }

          &-info {
            :global(.ant-descriptions-item-label) {
              width: 160px;
            }
          }
        }
      }
    }
  }
</style>
